/* eslint-disable no-unused-expressions */
<template>
  <div class="formal">
    <div id="main1"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      countrylist: [],
      legendData: [],
      myChart: null
    }
  },
  mounted() {
    this.getDataDraw();
  },
  methods: {
    //请求数据
    getDataDraw() {
      this.countrylist = []
      this.$store.dispatch("ajaxApi", {
        // this.$store.dispatch("ajax", {
        url: `/zonghe/api/algor?name.equals=国防实力对比&sort=add_time,desc&size=1`,
        method: "get",
        succeed: (res) => {
          // console.log(res);
          let data = JSON.parse(res[0].outputs)
          let forecast = data.forecast;
          let original = data.original;
          let series = [];
          let Aobj = {};
          Aobj.name = '预测';
          Aobj.type = 'bar';
          Aobj.stack = 'total';
          Aobj.data = [];
          Aobj.emphasis = {
            focus: 'series'
          };
          Aobj.label = {
            show: true
          }
          let Bobj = {};
          Bobj.name = '原始';
          Bobj.type = 'bar';
          Bobj.stack = 'total';
          Bobj.data = [];
          Bobj.emphasis = {
            focus: 'series'
          };
          Bobj.label = {
            show: true
          }
          for (let key in forecast) {
            this.countrylist.push(key);
            Aobj.data.push(forecast[key][0].y);
          }
          this.legendData.push(Aobj.name)
          for (let key in original) {
            Bobj.data.push(original[key][0].y);
          }
          this.legendData.push(Bobj.name)
          series.push(Aobj)
          series.push(Bobj)
          this.initCharts(series)
        },
        errored: (err) => {
          // console.log(err);
          if (err.response) {
            this.islistLoad = false;
            this.modelsData = [];
          }
        }
      });
    },
    initCharts(series) {
        console.log(series);
      var chartDom = document.getElementById('main1');
      this.myChart = echarts.init(chartDom);
      var option;
      option = {
        textStyle: {
          color: '#fff'
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'category',
          data: this.countrylist
        },
        xAxis: {
          type: 'value'
        },
        series: series
      };

      option && this.myChart.setOption(option);
    window.addEventListener('resize', () => {
                // 自动渲染echarts
                this.myChart.resize();
      })
    },
  }
}
</script>

<style scoped>
.formal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
}

#main1 {
  width: 100%;
  height: 100%;
}
</style>